<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
    <script src="../react18/prop-types.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        // class APP extends React.Component{
        // state={
        //     opacity:1
        // }
        // render(){
        //     let {opacity}=this.state
        //     return (
        //         <div>
        //         <h1 style={{opacity}}>react真难啊</h1> 
        //             <button onClick={this.handle}>不学了,我去学vue去了</button>
        //         </div>
        //     )
        // }
        // // 在组件加载完成之后修改state中的opacity
        // componentDidMount(){
        //     let {opacity}=this.state
        //     this.timer=setInterval(()=>{
        //         opacity-=0.1
        //         if (opacity<=0) {
        //         opacity=1
        //         }
        //         this.setState({opacity})
        //     },100)
        // }
        // // 组件即将被卸载清除计时器，不会有卸载完成
        // componentWillUnmount(){
        //     console.log("我被卸载了2");
        //     clearInterval(this.timer)
        // }
        // // 组件卸载的指令
        // handle=()=>{
        //     console.log("我被卸载了");
        //     root.unmount()
        // }
        // }
        // const root=ReactDOM.createRoot(document.getElementById("app"))
        //     root.render(<APP/>)

// .......................................................................................
// class App extends React.Component{
//     state={
//         opacity:1
//     }

//     render(){
//         let {opacity}=this.state
//         return (
//             <div>
//             <h1 style={{opacity:opacity}}>react真牛逼</h1>  
//             <button onClick={this.handle}>不学了</button> 
//             </div>
//         )
//     }
//     // 挂载完成之后执行的代码
//       componentDidMount(){
//         let {opacity} = this.state;
//         this.timer = setInterval(()=>{
//           opacity -= 0.1;
//           if(opacity <= 0){
//             opacity =1
//           }
//           this.setState({opacity})
//         },100)
//       }
//     // 组件被卸载完成
//         componentwillUnmount(){
//         console.log("我被卸载了");
//         clearInterval(this.timer)

//         }
// // 点击按钮卸载组件
//         handle=()=>{
//             root.unmount()
//         }
//         }

// ...................................................................................
        class App extends React.Component{
            state={
                opacity:1
            }

        render(){
        let {opacity}=this.state
        return(
            <div>
                    <h1 style={{opacity}}>React真难啊</h1>
                    <button onClick={this.handle}>不学了 我学vue去了</button>  
                </div> 
        )
         }
        componentDidMount(){
            let{opacity}=this.state
            this.timer=setInterval(()=>{
                opacity-=0.1
                if (opacity<=0) {
                    opacity=1
                }
                this.setState({opacity})
            },100)
        }

        componentWillUnmount(){
            clearInterval(this.timer)
        }
                handle=()=>{
                    root.unmount()
                }


        }



        const root=ReactDOM.createRoot(document.getElementById("app"))
        root.render(<App/>)


  </script>
</body>

</html>